<template>
  <div class="cms-variety" :class="`style_${type}`">
    <div class="choice">
      <div class="flex justify-start">
        <div class="choice-item choice-item-1">选集</div>
        <div class="choice-item choice-item-2">第1季</div>
        <div class="choice-item choice-item-3">
          <div v-if="type === 2" class="test"></div>
          <span v-if="type === 2" class="absolute left-2 top-0">选2季</span>
          <span v-if="type === 1">选2季</span>
        </div>
        <div class="choice-item choice-item-4">特辑</div>

        <div
          v-if="type === 1"
          style="
            height: 20px;
            border: 1px solid #ff512c;
            border-radius: 1px;
            background: #ff512c;
            transform: rotate(90deg);
            position: relative;
            top: 12px;
            left: -15px;
          "
        ></div>
      </div>
      <close-outlined style="color: #8e939a; align-self: center" />
    </div>
    <div class="all-num">5期全</div>

    <div class="list" v-for="item in listData" :key="item.index">
      <div class="img-container">
        <img :src="baseUrl + item.url" alt="" class="img-show" />
        <div class="gold">
          <dollar-outlined v-if="type === 1" style="font-size: 15px; color: #fff; align-self: center" />
          <div v-if="type === 1" class="money">120</div>
          <div v-if="type !== 1" class="money">VIP</div>
        </div>
        <div class="variety-date">{{ item.date }}</div>
      </div>

      <div class="des">第{{ item.index }}期&nbsp;{{ item.des }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import cmsVarietyListProps from './props'
import { CloseOutlined, DollarOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsVarietyListProps,

  components: {
    CloseOutlined,
    DollarOutlined
  },
  setup() {
    const baseUrl = '/src/components/cms/components/'

    const varietyData = [
      {
        index: 0,
        label: '选集'
      },
      {
        index: 1,
        label: '第1季'
      },
      {
        index: 2,
        label: '第2季'
      },
      {
        index: 3,
        label: '特辑'
      }
    ]

    const listData = [
      {
        index: 1,
        url: 'assets/img/jxtz.webp',
        date: '2022-05-17期',
        des: `达达乐队乐夏舞台合集达
达乐队之后的夏天！`
      },
      {
        index: 2,
        url: 'assets/img/jxtz.webp',
        date: '2022-06-19期',
        des: `达达乐队乐夏舞台合集达
达乐队之后的夏天！`
      },
      {
        index: 3,
        url: 'assets/img/jxtz.webp',
        date: '2022-07-21期',
        des: `达达乐队乐夏舞台合集达
达乐队之后的夏天！`
      },
      {
        index: 4,
        url: 'assets/img/jxtz.webp',
        date: '2022-05-17期',
        des: `达达乐队乐夏舞台合集达
达乐队之后的夏天！`
      }
    ]
    return {
      baseUrl,
      varietyData,
      listData
    }
  }
})
</script>
<style scoped lang="less">
.cms-variety {
  width: 375px;
  padding: 8px 16px;
  background-color: #fff;
  @apply flex flex-col;
  .test {
    width: 50px;
    height: 30px;
    border: 1px solid #ff512c;
    transform: skewX(-20deg);
  }
  .all-num {
    font-size: 12px;
    color: #848494;
    letter-spacing: 0;
    line-height: 12px;
    font-weight: 400;
    margin-top: 12px;
  }
  .choice {
    @apply flex justify-between;
  }

  .list {
    @apply flex justify-start gap-x-3 mt-3;
  }
  .img-container {
    position: relative;
  }
  .img-show {
    width: 134px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
  }
  .des {
    width: 197px;
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    word-break: break-all;
    // line-height: 42px;
    font-weight: 400;
  }
  .variety-date {
    font-size: 12px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    color: #ffffff;
    text-align: right;
    line-height: 10px;
    text-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 4px;
    right: 4px;
  }
  &.style_1 {
    .choice-item {
      height: 21px;
      font-size: 14px;
      color: #333333;
      text-align: center;
      line-height: 21px;
      margin-left: 28px;
    }
    .choice-item-1 {
      color: #000;
      font-weight: 500;
      margin-left: 0;
    }
    .choice-item-2 {
      margin-left: 16px;
    }
    .choice-item-4 {
      color: #ff613f;
    }
    .gold {
      width: 48px;
      height: 20px;
      background-image: linear-gradient(135deg, #cbae6c 0%, #eed78e 100%);
      border-radius: 0 8px 0 8px;
      position: absolute;
      top: 0;
      left: 86.5px;
      @apply flex justify-center;
      .money {
        line-height: 20px;
        margin-left: 3px;
      }
    }
  }
  &.style_2 {
    .choice-item {
      width: 60px;
      height: 30px;
      font-size: 14px;
      color: #333333;
      text-align: center;
      line-height: 30px;
      position: relative;
    }
    .choice-item-1 {
      color: #000;
      font-weight: 500;
      text-align: left;
      margin-left: 0;
    }
    .choice-item-2 {
      width: 60px;
      height: 30px;
      margin-left: -12px;
    }

    .gold {
      width: 32px;
      height: 17px;
      background-image: linear-gradient(135deg, #cbae6c 0%, #eed78e 100%);
      border-radius: 3px;
      position: absolute;
      top: 4px;
      right: 4px;
      @apply flex justify-center;
      .money {
        line-height: 17px;
      }
    }
  }
  &.style_3 {
  }
}
</style>
